<template>
	<div class="135editor-container">
		<div ref="editorRef" :id="id" name="content" type="text/plain" style="width: 860px;"></div>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, defineComponent, onMounted, onUnmounted } from 'vue';
export default defineComponent({
	name: "135editor",
	components: {},
	props: {
		id: {
			type: String,
			default: () => "135editor",
		},
		path: {
			type: String,
			default: () => "/135editor/",
		},
		config: {
			type: Object,
			default: () => {},
		},
		appkey: {
			type: String,
			default: () => "616398a5-ba5c-4179-8301-2f9eac10c65d",
		},
	},
	setup(props, { emit }) {
		const editorRef = ref();
		const state = reactive({
			scripts: [
				"ueditor.config.js",
				"third-party/jquery-3.3.1.min.js",
				"ueditor.all.min.js",
			],
			endScripts: [
				"lang/zh-cn/zh-cn.js",
				"a92d301d77.js",
				"custom/video.js",
				"custom/catchremoteimage.js",
				"custom/plugin/aiwrite.js",
				"custom/plugin/crypto-js.min.js",
			],
			css: [
				"themes/default/css/ueditor.min.css",
				"themes/96619a5672.css",
				"custom/plugin/aiwrite.css",
			],
		});
		
		const injectScript = (script: any) => {
			let scriptTag = document.getElementById(script);
			if (!scriptTag) {
				scriptTag = document.createElement("script");
				scriptTag.setAttribute("type", "text/javascript");
				scriptTag.setAttribute("src", props.path + script);
				scriptTag.setAttribute("id", script.toString().replace(/\/|\./g,'-'));
				const head = document.getElementsByTagName("head")[0];
				head.appendChild(scriptTag);
			}
		
			if (scriptTag.loaded || (script != null && script.readyState === "complete")) {
				return Promise.resolve(script);
			}
		
			return new Promise((resolve) => {
				if (scriptTag.readyState) {
					// IE
					scriptTag.onreadystatechange = () => {
						if (
							scriptTag.readyState === "loaded" ||
							scriptTag.readyState === "complete"
						) {
							scriptTag.onreadystatechange = null;
							resolve(script);
						}
					};
				} else {
					scriptTag.onload = () => {
						resolve(script);
					};
				}
				// scriptTag.addEventListener("load", () => {
				// 	resolve(script);
				// });
			});
		}
		
		const injectCss = (css: any) => {
			let cssTag = document.getElementById(css);
			if (!cssTag) {
				cssTag = document.createElement("link");
				cssTag.setAttribute("type", "text/css");
				cssTag.setAttribute("href", props.path + css);
				cssTag.setAttribute("id", css.toString().replace(/\/|\./g,'-'));
				cssTag.setAttribute("rel", "stylesheet");
				const head = document.getElementsByTagName("head")[0];
				head.appendChild(cssTag);
			}
		}
		
		const initEditor = async () => {
			if (!window.current_editor) {
				const configs = Object.assign({
					plat_host: 'www.135editor.com',
					appkey: props.appkey,
					open_editor: false,
					open_svgeditor: false, //起用135svg编辑器
					pageLoad: false,
					serverUrl: '',
					configUrl: '',
					style_url: 'https://www.135editor.com/editor_styles/open?inajax=1&appkey=' + props.appkey,
					page_url: 'https://www.135editor.com/editor_styles/open_styles?inajax=1&appkey=' + props.appkey,
					style_width: 340,
					uploadFormData: {
						'referer': window.document.referrer
					},
					initialFrameWidth: 450,
					initialFrameHeight: 680,
					zIndex: 1000,
					focus: true,
					autoFloatEnabled: false,
					autoHeightEnabled: false,
					scaleEnabled: false,
					focusInEnd: true,
					removeStyle: true,
					catchRemoteImageEnable: true,
					aiModelUrlCreate: null,
				}, props.config);
				
				configs.UEDITOR_HOME_URL = props.path;
				window.current_editor = window.UE.getEditor(props.id, configs);
				
				window.UE.getEditor(props.id).ready(() => {
					emit('ready', window.current_editor);
					let scriptTag = document.getElementById('135editor');
					if(scriptTag){
						scriptTag.style.width="100%";
						//scriptTag.firstChild.children[0].style.display="none";
						scriptTag.firstChild.children[1].style.width="100%";
					}
				})
			}
		}
		
		const readyEditor = async () => {
			state.css.map(injectCss);
			await Promise.all(state.scripts.map(injectScript)).then(() => {
				return state.endScripts.map(injectScript);
			}).then(async () => {
				await initEditor();
			});
		}
		
		const destroyEditor = async () => {
			if (window.current_editor && window.current_editor.destroy) {
				window.current_editor.destroy();
				window.current_editor = null;
			}
		}
		
		onMounted(() => {
			readyEditor();
		});
			
		onUnmounted(() => {
			destroyEditor();
		});
		
		return {
			editorRef,
			readyEditor,
			destroyEditor,
			...toRefs(state),
		};
	}
});
</script>